<template>
    <div class="warehouse-in-add">
        <van-form @submit="onSave">
            <van-cell-group inset class="add-section">
                <van-field 
                    v-model.trim="warehouseInDetailData.detail.spzs" 
                    placeholder="填写品名" 
                    label="品名" 
                    required
                    :rules="[{required: true, message:'请填写品名'}]"
                />
                <van-field
                    v-model="warehouseInDetailData.detail.wpggA"
                    is-link
                    name="wpggA"
                    label="纱支"
                    readonly
                    placeholder="请选择"
                    required
                    @click="openWpggPicker('纱支')"
                    :rules="[{required: true, message:'请选择纱支'}]"
                />
                <!-- <van-field
                    v-model="warehouseInDetailData.spcd"
                    is-link
                    name="spcd"
                    label="品牌"
                    placeholder="请选择"
                    required
                    @click="openBrandPicker"
                    :rules="[{required: true, message:'请选择品牌'}]"
                /> -->
                <van-field 
                    v-model="warehouseInDetailData.detail.spcd" 
                    placeholder="填写品牌" 
                    label="品牌" 
                    required 
                    :rules="[{required: true, message:'请填写品牌'}]"
                />
                <van-field 
                    v-model="warehouseInDetailData.detail.spjsl" 
                    placeholder="填写件重" 
                    label="件重" 
                    required
                    :rules="[{required: true, message:'请填写件重'}]"
                    :formatter="unitWeightFormatter"
                    type="number"
                    @blur="getWeightBlur"
                >
                    <template #button>
                        <span class="font-black">KG</span>
                    </template>
                </van-field>
                <van-field 
                    v-model="warehouseInDetailData.detail.spjs" 
                    placeholder="填写件数" 
                    label="件数" 
                    required
                    :formatter="numberFormatter"
                    :rules="[{required: true, message:'请填写件数'}]"
                    type="number"
                    @blur="getAllWeight"
                />
                <van-field 
                    v-model="warehouseInDetailData.detail.spsl"
                    placeholder="填写重量" 
                    label="重量" 
                    required
                    :rules="[{required: true, message:'请填写重量'}]"
                    :formatter="weightFormatter"
                    type="number"
                    @blur="getUnitWeightBlur"

                >
                    <template #button>
                        <span class="font-black">吨</span>
                    </template>
                </van-field>
                <!-- <van-field v-model="" placeholder="填写支重" label="支重"/> -->
                <van-field 
                    v-model="warehouseInDetailData.detail.spbh" 
                    @input="warehouseInDetailData.detail.spbh = warehouseInDetailData.detail.spbh.replace(' ', '')"
                    @blur="warehouseInDetailData.detail.spbh = warehouseInDetailData.detail.spbh.replace(' ', '')"
                    placeholder="填写批次" 
                    label="批次"
                />
                <van-field 
                    v-model="warehouseInDetailData.detail.spgh" 
                    @input="warehouseInDetailData.detail.spgh = warehouseInDetailData.detail.spgh.replace(' ', '')"
                    @blur="warehouseInDetailData.detail.spgh = warehouseInDetailData.detail.spgh.replace(' ', '')"
                    placeholder="填写柜号" 
                    label="柜号"
                />
                <van-field
                    v-model="warehouseInDetailData.detail.wpggD"
                    is-link
                    name="wpggD"
                    readonly
                    label="用途"
                    placeholder="请选择"
                    @click="openWpggPicker('用途')"
                />
                <van-field
                    v-model="warehouseInDetailData.detail.wpggE"
                    is-link
                    name="wpggE"
                    readonly
                    label="产地"
                    placeholder="请选择"
                    @click="openWpggPicker('产地')"
                />
                <van-field
                    v-model="warehouseInDetailData.detail.wpggB"
                    is-link
                    name="wpggB"
                    readonly
                    label="工艺"
                    placeholder="请选择"
                    @click="openWpggPicker('工艺')"
                />
                <van-field
                    v-model="warehouseInDetailData.detail.wpggC"
                    is-link
                    name="wpggC"
                    readonly
                    label="工序"
                    placeholder="请选择"
                    @click="openWpggPicker('工序')"
                />
                <van-field
                    v-model="warehouseInDetailData.detail.wpggF"
                    is-link
                    name="wpggF"
                    readonly
                    label="漂染性"
                    placeholder="请选择"
                    @click="openWpggPicker('漂染性')"
                />
                <van-field
                    v-model="warehouseInDetailData.detail.wpggH"
                    label="颜色"
                    placeholder="请填写颜色"
                />
                <van-field 
                    v-model="warehouseInDetailData.detail.itbz" 
                    placeholder="填写货物备注" 
                    label="备注"
                />
            </van-cell-group>
            <div class="warehouse-in-add-attention display-flex justify-center align-center">
                <van-image :src="attentionIcon" height="12" width="12"/>
                <span class="font-CE0C0C font-size-24 ml-5">请完善货物信息，方便您找货！</span>
            </div>
            <div class="display-flex justify-between warehouse-in-add-btn font-size-30">
                <div class="left-btn">
                    <van-button color="#255FB6" block native-type="submit" @click="handleSave('保存更多')">保存并继续添加</van-button>
                </div>
                <div class="right-btn pull-right">
                    <van-button color="#fff" block native-type="submit" @click="handleSave('保存')">保存</van-button>
                </div>
            </div>
        </van-form>
        
        <!-- <van-popup v-model:show="yarnCountData.showPicker" position="bottom">
            <van-picker
                :columns="yarnCountData.columns"
                @cancel="yarnCountData.showPicker = false"
                @confirm="yarnCountDataConfirm"
            />
        </van-popup> -->
        <van-action-sheet v-model:show="yarnCountData.showPicker" title="请选择" class="pb-30">
            <div class="select-yarnCount display-flex flex-wrap">
                <div v-for="(item, index) in yarnCountData.columns" :key="item.id" :class="item.active?'active item':'item'" @click="yarnCountDataConfirm(item)">
                    <span>{{ item.name }}</span>
                </div>
            </div>
        </van-action-sheet>
    </div>
</template>
<script setup lang="ts">
    import { getYarnCount } from '@/api/yarnCount'
    import attentionIcon from '@/assets/images/attention.png'
    import { onMounted, reactive, ref, computed } from 'vue'
    import type { Ref } from 'vue'
    import { msgSuccess, msgError } from '@/utils/message'
    import { useRouter } from 'vue-router'
    import { getLocalStorage, setLocalStorage } from '@/utils/localStorage'
    import { WEIGHT_DIGIT, NUMBER_DIGIT, UNIT_WEIGHT_DIGIT } from '@/utils/constant'
    import { inputDigit } from '@/utils/util'
    import type { WarehouseInDetailData, YarnCountData} from '@/type/warehouseIn'
   

    const router = useRouter()
    const numberFormatter = (value: string) => {
        return inputDigit(value, NUMBER_DIGIT)
    }
    const unitWeightFormatter = (value: string) => {
        return inputDigit(value, UNIT_WEIGHT_DIGIT)
    }
    const weightFormatter = (value: string) => {
        return inputDigit(value, WEIGHT_DIGIT)
    }

    const warehouseInDetailData: any = reactive({
        detail: {
            itbz: '',
			spbh: '',
			spcd: '',
			spcwid: '',
			spgh: '',
			spjs: '',
			spjsl: '',
			spmc: '',
			spsl: '',
			spzs: '',
			ssrqid: '',
			wpggA: '',
			wpggB: '',
			wpggC: '',
			wpggD: '',
			wpggE: '',
			wpggF: '',
			wpggG: '',
			wpggH: ''
        }
    })
    const yarnCountData: YarnCountData = reactive({
        query:{},
        showPicker: ref(false),
        listA:[],
        listB:[],
        listC:[],
        listD:[],
        listE:[],
        listF:[],
        columnsA:[],
        columnsB:[],
        columnsC:[],
        columnsD:[],
        columnsE:[],
        columnsF:[],
        list:[],
        columns:[],
        select:'',
    })
    const saveType: Ref<string> = ref('')



    // const getSpsl = computed(() => {
    //     let spsl = '-'
    //     const spjs = warehouseInDetailData.detail.spjs
    //     const spjsl = warehouseInDetailData.detail.spjsl
    //     if(spjs && spjsl) {
    //         spsl = (parseFloat(spjs)*parseFloat(spjsl)*0.001).toFixed(WEIGHT_DIGIT)
    //     }
    //     warehouseInDetailData.detail.spsl = spsl
    //     return spsl
    // })

    onMounted(() => {
        yarnCount()
    })


       /**修改件数 */
    const getAllWeight = () => {
      const r = warehouseInDetailData.detail
      const value = r.spjs
      if(r.spsl && r.spjsl) {
        r.spsl = value?parseFloat((value*r.spjsl/1000).toFixed(WEIGHT_DIGIT)):''
      } else if(r.spsl && !r.spjsl){
        r.spjsl = parseFloat((r.spsl * 1000 / value).toFixed(UNIT_WEIGHT_DIGIT))
      } else if(!r.spsl && r.spjsl) {
        r.spsl = value?parseFloat((value*r.spjsl/1000).toFixed(WEIGHT_DIGIT)):''
      } else {
        r.spsl = ''
        r.spjsl = ''
      }
    }

     /**修改件重 */
    const getWeightBlur = () => {
      const r = warehouseInDetailData.detail
      if(r.spjs) {
        r.spsl = r.spjsl?parseFloat((r.spjs*r.spjsl/1000).toFixed(WEIGHT_DIGIT)):''
        return msgError('重量（吨）已自动更新')
      }
    }
    /* 修改重量**/
    const getUnitWeightBlur = () => {
      const r = warehouseInDetailData.detail
      const value = r.spsl
      if(r.spjs) {
        r.spjsl = value?parseFloat((value * 1000 / r.spjs).toFixed(UNIT_WEIGHT_DIGIT)):''
        return msgError('件重（kg）已自动更新')
      }
    }

    function yarnCount() {
        getYarnCount(yarnCountData.query).then((res:any) => {
            const data = res.data
            yarnCountData.listA = data['a']
            yarnCountData.listB = data['b']
            yarnCountData.listC = data['c']
            yarnCountData.listD = data['d']
            yarnCountData.listE = data['e']
            yarnCountData.listF = data['f']
            yarnCountData.columnsA = yarnCountData.listA.map((a: any) => {return {name:a.name, id:a.id,active:false}})
            yarnCountData.columnsB = yarnCountData.listB.map((a: any) => {return {name:a.name, id:a.id,active:false}})
            yarnCountData.columnsC = yarnCountData.listC.map((a: any) => {return {name:a.name, id:a.id,active:false}})
            yarnCountData.columnsD = yarnCountData.listD.map((a: any) => {return {name:a.name, id:a.id,active:false}})
            yarnCountData.columnsE = yarnCountData.listE.map((a: any) => {return {name:a.name, id:a.id,active:false}})
            yarnCountData.columnsF = yarnCountData.listF.map((a: any) => {return {name:a.name, id:a.id,active:false}})
        })
    }

    function openWpggPicker(data: any) {
        if(data == '纱支') yarnCountData.columns = yarnCountData.columnsA
        if(data == '工艺') yarnCountData.columns = yarnCountData.columnsB
        if(data == '工序') yarnCountData.columns = yarnCountData.columnsC
        if(data == '用途') yarnCountData.columns = yarnCountData.columnsD
        if(data == '产地') yarnCountData.columns = yarnCountData.columnsE
        if(data == '漂染性') yarnCountData.columns = yarnCountData.columnsF
        yarnCountData.select = data
        changeYarnCountPicker()
    }

    function yarnCountDataConfirm(data: any) {
        if(yarnCountData.select == '纱支') warehouseInDetailData.detail.wpggA = data.name
        if(yarnCountData.select == '工艺') warehouseInDetailData.detail.wpggB = data.name
        if(yarnCountData.select == '工序') warehouseInDetailData.detail.wpggC = data.name
        if(yarnCountData.select == '用途') warehouseInDetailData.detail.wpggD = data.name
        if(yarnCountData.select == '产地') warehouseInDetailData.detail.wpggE = data.name
        if(yarnCountData.select == '漂染性') warehouseInDetailData.detail.wpggF = data.name   
        changeYarnCountPicker()    
    }

    function changeYarnCountPicker() {
        yarnCountData.showPicker = !yarnCountData.showPicker
    }

    function handleSave(data:string) {
        saveType.value = data
    }

    function onSave() {
        const details = warehouseInDetailData.detail
        if(details.spbh.length === 0 && details.spgh.length === 0) {
            return msgError('批次和柜号不能同时为空，请至少填写一项')
        }
        if (Number(details.spjsl) == 37.5 || Number(details.spjsl) == 37.50 || Number(details.spjsl) == 37.500 || Number(details.spjsl) == 30.75 || Number(details.spjsl) == 30.750) return msgError('单重为37.5KG或30.75KG的货物占用位置较大且易发生倒托现象，我司暂不收存，麻烦重新安排货物流向')
        const data = getLocalStorage('warehouseIn')
        data.inp.push(details)
        setLocalStorage('warehouseIn', data)
        if(saveType.value == '保存') goAppoint()
        if(saveType.value == '保存更多'){
            msgSuccess('已保存，请继续添加')
            formReset()
        }
    }

    function goAppoint() {
        router.back()
    }

    function formReset() {
        warehouseInDetailData.detail = {
            itbz: '',
			spbh: '',
			spcd: '',
			spcwid: '',
			spgh: '',
			spjs: '',
			spjsl: '',
			spmc: '',
			spsl: '',
			spzs: '',
			ssrqid: '',
			wpggA: '',
			wpggB: '',
			wpggC: '',
			wpggD: '',
			wpggE: '',
			wpggF: '',
			wpggG: '',
			wpggH: ''
        }
    }

</script>
<style lang="scss" scoped>
    .warehouse-in-add {
        .add-section {
            margin-top:36px;
        }
        &-attention {
            margin-top:150px;
        }
        &-btn {
            padding:30px 36px 80px;
            .left-btn {
                width:435px;
                height: 90px;
                button {
                    border-radius:10px;
                } 
            }
            .right-btn {
                width:213px;
                height: 90px;
                button {
                    border-radius:10px;
                    color:#000 !important; 
                }         
            }
        }
        .select-yarnCount {
            padding:15px 20px 30px;
            max-height: 550px;
            font-size: 26px;
            .item {
                min-width:150px;
                padding:0 20px;
                display:inline-block;
                height:60px;
                line-height: 60px;
                color:#999;
                text-align:center;
                border-radius:30px;
                border:1px solid #999;
                margin:15px;
                &.active {
                    color:#fff;
                    border:1px solid #255FB6;
                    background:#255FB6;
                }
            }
        }
    }
</style>